<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <div id="main" style="width: 800px;height: 100px; margin-left: 180px;"></div>
            </el-card>
        </el-col>
    </el-row>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>Partial Information Display</span>
                <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
                    个人信息修改
                </el-button>
                <el-drawer v-model="drawer" :with-header="false" :close-on-click-modal="false">
                    <div style="font-size: 45px; color: red; margin-bottom: 30px;">请慎重修改个人密码</div>
                    <div style="font-size: 40px; color: red; margin-bottom: 30px;">忘记请联系管理员找回</div>
                    <div style="font-size: 40px; color: red; margin-bottom: 30px;"> ！！！！！！！！！！！</div>
                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules"
                        label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
                        <el-form-item label="学号" prop="sno">
                            <el-input v-model="ruleForm.sno" disabled />
                        </el-form-item>
                        <el-form-item label="姓名" prop="sname">
                            <el-input v-model="ruleForm.sname" />
                        </el-form-item>
                        <el-form-item label="性别" prop="sgender">
                            <el-input v-model="ruleForm.sgender" />
                        </el-form-item>
                        <el-form-item label="Activity time" required prop="sbirthday">
                            <el-form-item prop="date1">
                                <el-date-picker v-model="ruleForm.sbirthday" type="date" />
                            </el-form-item>
                        </el-form-item>
                        <el-form-item label="班级" prop="sclass">
                            <el-input v-model="ruleForm.sclass" />
                        </el-form-item>

                        <el-form-item label="密码(加密)" prop="spassword">
                            <el-input v-model="ruleForm.spassword" @input="handlePasswordInput" />
                        </el-form-item>

                        <el-form-item style="margin-left: 130px;">
                            <el-button type="primary" size="large" @click="submitForm(ruleFormRef)">确认</el-button>
                            <el-button type="warning" size="large" @click="resetForm(ruleFormRef)">取消</el-button>
                        </el-form-item>
                    </el-form>

                </el-drawer>
            </div>
        </template>

        <el-form :model="studentInformation" label-width="auto" style="max-width: 600px">
            <el-form-item label="姓名">
                <el-input v-model="studentInformation.sname" disabled />
            </el-form-item>
            <el-form-item label="入学日期">
                <el-input v-model="studentInformation.sbirthday" disabled />
            </el-form-item>
            <el-form-item label="个人密码(已加密)">
                <el-input v-model="studentInformation.spassword" disabled />
            </el-form-item>
        </el-form>

        <template #footer>
            <div style="text-align: center;">中国石油大学(华东)</div>
        </template>
    </el-card>
</template>


<script lang="ts" setup>
import studentOpreateApi from '@/api/studentOpreateApi ';
import { onMounted, reactive, watch, ref, onBeforeUnmount, shallowRef } from 'vue'
import * as echarts from "echarts"
import { ElLoading, ElMessage } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const drawer = ref(false)


interface RuleForm {
    sid: number
    sno: string
    sname: string
    sgender: string
    sbirthday: string
    sclass: string
    spassword: string
    zid: number
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    sid: 0,
    sno: '',
    sname: '',
    sgender: '',
    sbirthday: '',
    sclass: '',
    spassword: '',
    zid: 0,
})


const isPasswordChanged = ref(false); // 用于跟踪密码是否被修改
const passwordInitialValue = ref(''); // 用于存储密码的初始值
const handlePasswordInput = (newValue) => {
    if (newValue !== passwordInitialValue.value) {
        isPasswordChanged.value = true;
    }
};
const rules = reactive<FormRules<RuleForm>>({
    sno: [
        { required: true, message: 'Please input Activity sno', trigger: 'input' },
    ],
    sname: [
        { required: true, message: '姓名不能为空', trigger: 'blur' },
        { min: 2, max: 4, message: '长度应该在2到4个汉字之间', trigger: 'input' },
    ],
    sgender: [
        { required: true, message: '性别不能为空', trigger: 'blur' },
        { pattern: /^(男|女)$/, message: '性别只能是男或者女', trigger: 'input' }
    ],
    sbirthday: [
        {
            type: 'date',
            required: true,
            message: '生日不可为空',
            trigger: 'change',
        },
    ],
    sclass: [
        { required: true, message: '班级名称不可为空', trigger: 'input' },
        { pattern: /^class[1-5]$/, message: '班级格式必须为class后跟一个1到5之间的数字', trigger: 'input' }
    ],
    spassword: [
        { required: true, message: '密码不可为空', trigger: 'input' },
        { pattern: /^[A-Za-z0-9]+$/, message: '密码只能包含数字和字母', trigger: 'input' }
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            //console.log('submit!')
            onSubmit()
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    selectStudent()
    drawer.value = false
}




//确认修改数据
function onSubmit() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    studentOpreateApi.update(ruleForm)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage.success(resp.msg)
                selectStudent()
                drawer.value = false;
            } else {
                //弹出消息
                ElMessage.error(resp.msg)
            }
        })
}



onMounted(async () => {
    setTimeout(() => {
        bbb();
    }, 100);
})
function bbb() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        graphic: {
            elements: [
                {
                    type: 'text',
                    left: 'center',
                    top: 'center',
                    style: {
                        text: "欢迎" + studentInformation.value.sname + "登录",
                        fontSize: 60,
                        fontWeight: 'bold',
                        fill: 'red' // 初始颜色
                    },
                    keyframeAnimation: {
                        duration: 3000,
                        loop: true,
                        keyframes: [
                            {
                                percent: 0, // 动画开始时
                                style: {
                                    fill: 'red' // 初始颜色
                                }
                            },
                            {
                                percent: 0.5, // 动画中间时
                                style: {
                                    fill: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0, color: 'red' // 50% 处的颜色
                                            },
                                            {
                                                offset: 1, color: 'blue' // 50% 处的颜色
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                percent: 1, // 动画结束时
                                style: {
                                    fill: 'green' // 最终颜色
                                }
                            }
                        ]
                    }
                }
            ]
        }
    };
    option && myChart.setOption(option);
}
const studentInformation = ref("")
//查询学生个人信息
function selectStudent() {
    studentOpreateApi.studentLoginInfo()
        .then(resp => {
            console.log(resp.data);
            studentInformation.value = resp.data;
            passwordInitialValue.value = resp.data.spassword;
            Object.assign(ruleForm, resp.data);
        })
}
selectStudent()


</script>



<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    width: 520px;
    margin-top: 50px;
    margin-left: 300px;
}
</style>
